<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue 示例</title>
</head>
<body>
    <div id="app">
       <li v-for="(book, index) in books" :key="index">{{index}}-{{book.name}}</li>
       <ul>
           <template v-for="(book, index) in books" :key="index">
               <li>书名：{{book.name}}</li>
           </template>
       </ul>
       <!-- 除了数组外 ，对象的属性也是可以遍历的 -->
       <span v-for="(value, index) in user" :key="index">{{value}}</span>
       <ul>
           <li v-for="(value, key, index) in user">
               {{index}} - {{key}} : {{value}}
           </li>
       </ul>
       <!-- v-for还可以迭代整数 : -->
       <span v-for="n in 10">{{ n }}</span>
    </div>

    <script src="http://unpkg.com/vue/dist/vue.min.js"></script>
    <script>
        // 变量app表示一个vue实例
        var app = new Vue({
            el: '#app', //用于指定一个页面中存在的Dom元素来挂载Vue示例。挂载成功后可以使用app.$el来访问该元素
            data: {
                books:[
                    { name : '《Vue.js实战》'},
                    { name : '《JavaScript语法精粹》'},
                    { name : ' 《帅哥是如何养成的》'}
                ],
                user: {
                    name: 'hhh',
                    gender: '男',
                    age: 26
                }
            }
        })
    </script>
</body>
</html>